<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--ios7-->
    <link rel="stylesheet" type="text/css" href="js/ios-switch/switchery.css" />

    <!--icheck-->
    <link th:href="@{/js/iCheck/skins/minimal/minimal.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/minimal/red.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/minimal/green.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/minimal/blue.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/minimal/yellow.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/minimal/purple.css}" rel="stylesheet">

    <link th:href="@{/js/iCheck/skins/square/square.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/square/red.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/square/green.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/square/blue.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/square/yellow.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/square/purple.css}" rel="stylesheet">

    <link th:href="@{/js/iCheck/skins/flat/grey.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/flat/red.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/flat/green.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/flat/blue.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/flat/yellow.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/flat/purple.css}" rel="stylesheet">

    <!--multi-select-->
    <link rel="stylesheet" type="text/css" th:href="@{/js/jquery-multi-select/css/multi-select.css}" />

    <!--file upload-->
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap-fileupload.min.css}" />

    <!--tags input-->
    <link rel="stylesheet" type="text/css" th:href="@{/js/jquery-tags-input/jquery.tagsinput.css}" />



    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet">
    <!--导入: icheck-->
    <div th:include="~{common/component :: #icheck}"></div>
    <!--导入: dashboard calendar-->
    <div th:include="~{common/component :: calendarCss}"></div>
    <!--导入: common-->
    <div th:include="~{common/component :: commone-css}"></div>


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <div th:include="common/component :: brosupport-js"></div>
    <![endif]-->
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:include="~{common/component::leftSide}"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div th:include="~{common/component::headerSection}"></div>
        <!-- header section end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <form method="post" th:action="@{/upload}" enctype="multipart/form-data">
                <input type="file" name="singleFile"><br>
                <input type="file" name="files" multiple><br>
                <input type="submit" value="提交">
            </form>
            <hr/>
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Advanced File Input
                            <span class="tools pull-right">
                            <a class="fa fa-chevron-down" href="javascript:;"></a>
                            <a class="fa fa-times" href="javascript:;"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <form method="post" th:action="@{/upload}" enctype="multipart/form-data" class="form-horizontal ">
                                <div class="form-group">
                                    <label class="control-label col-md-3">Without input</label>
                                    <div class="controls col-md-9">
                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                                <span class="btn btn-default btn-file">
                                                <span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select file</span>
                                                <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
                                                <input type="file" name="files" class="default" multiple/>
                                                </span>
                                            <span class="fileupload-preview" style="margin-left:5px;"></span>
                                            <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none; margin-left:5px;"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group last">
                                    <label class="control-label col-md-3">Image Upload</label>
                                    <div class="col-md-9">
                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                            <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                                                <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
                                            </div>
                                            <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                            <div>
                                                   <span class="btn btn-default btn-file">
                                                   <span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select image</span>
                                                   <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
                                                   <input type="file" name="singleFile" class="default" />
                                                   </span>
                                                <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</a>
                                            </div>
                                        </div>
                                        <br/>
                                        <input type="submit" value="提交">
                                        <span class="label label-danger ">NOTE!</span>
                                        <span>
                                             Attached image thumbnail is
                                             supported in Latest Firefox, Chrome, Opera,
                                             Safari and Internet Explorer 10 only
                                             </span>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </section>
                </div>
            </div>
        </div>

        <!--body wrapper end-->

        <!--footer section start-->
        <div th:include="~{common/component::myfooter}"></div>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>


</body>
<!-- Placed js at the end of the document so the pages load faster -->
<div th:include="~{common/component :: jquery-js}"></div>
<!--easy pie chart-->
<div th:include="~{common/component :: pieChart-js}"></div>
<!--Sparkline Chart-->
<div th:include="~{common/component :: sparkChart-js}"></div>
<!--icheck -->
<div th:include="~{common/component :: icheck-js}"></div>
<!-- jQuery Flot Chart-->
<div th:include="~{common/component :: jqeryFlot-js}"></div>
<!-- Placed js at the end of the document so the pages load faster -->
<script th:src="@{/js/jquery-1.10.2.min.js}"></script>
<script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
<script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/modernizr.min.js}"></script>
<script th:src="@{/js/jquery.nicescroll.js}"></script>

<!--ios7-->
<script th:src="@{/js/ios-switch/switchery.js}" ></script>
<script th:src="@{/js/ios-switch/ios-init.js}" ></script>

<!--icheck -->
<script th:src="@{/js/iCheck/jquery.icheck.js}"></script>
<script th:src="@{/js/icheck-init.js}"></script>
<!--multi-select-->
<script type="text/javascript" th:src="@{/js/jquery-multi-select/js/jquery.multi-select.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-multi-select/js/jquery.quicksearch.js}"></script>
<script th:src="@{/js/multi-select-init.js}"></script>
<!--spinner-->
<script type="text/javascript" th:src="@{/js/fuelux/js/spinner.min.js}"></script>
<script th:src="@{/js/spinner-init.js}"></script>
<!--file upload-->
<script type="text/javascript" th:src="@{/js/bootstrap-fileupload.min.js}"></script>
<!--tags input-->
<script th:src="@{/js/jquery-tags-input/jquery.tagsinput.js}"></script>
<script th:src="@{/js/tagsinput-init.js}"></script>
<!--bootstrap input mask-->
<script type="text/javascript" th:src="@{/js/bootstrap-inputmask/bootstrap-inputmask.min.js}"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>
</html>